import { onMounted, onUnmounted, ref, type ShallowRef } from 'vue'

/**
 * 处理右键菜单
 * @param containerRef 容器ref
 * @returns
 */
export function useContextMenu(
  containerRef: Readonly<ShallowRef<HTMLDivElement | null>>
) {
  // 定义一个变量，用于控制菜单的显示状态
  const showMenu = ref(false)
  // 定义一个变量，用于记录菜单的横坐标
  const menuX = ref(0)
  // 定义一个变量，用于记录菜单的纵坐标
  const menuY = ref(0)

  // 定义一个函数，用于处理右键菜单的显示
  const handleContextMenu = (e: MouseEvent) => {
    // 阻止默认的右键菜单显示
    e.preventDefault()
    // 阻止事件冒泡
    e.stopPropagation()
    // 设置菜单的显示状态为true
    showMenu.value = true
    // 设置菜单的横坐标
    menuX.value = e.clientX
    // 设置菜单的纵坐标
    menuY.value = e.clientY
  }

  // 定义一个函数，用于关闭菜单
  const closeMenu = () => {
    // 设置菜单的显示状态为false
    showMenu.value = false
  }

  // 在组件挂载时，给容器添加右键菜单事件监听和点击事件监听
  onMounted(() => {
    const div = containerRef.value as HTMLDivElement
    div.addEventListener('contextmenu', handleContextMenu)
    window.addEventListener('click', closeMenu, true)
    window.addEventListener('contextmenu', closeMenu, true)
  })

  // 在组件卸载时，移除容器和窗口的右键菜单事件监听和点击事件监听
  onUnmounted(() => {
    const div = containerRef.value as HTMLDivElement
    div.removeEventListener('contextmenu', handleContextMenu)
    window.removeEventListener('click', closeMenu, true)
    window.removeEventListener('contextmenu', closeMenu, true)
  })

  // 返回菜单的显示状态、横坐标和纵坐标
  return {
    showMenu,
    menuX,
    menuY
  }
}
